<template>
	<view class="recommend">
		<view class="chose">
			<div class="tip">请选择推荐关键词：</div>
			<scroll-view lower-threshold="50" scroll-y="true" class="scroll-view" @scrolltolower="getPage">
				<view
					v-for="item in keywordList"
					class="item"
					:key="item.id"
					@click="chose(item)"
					:class="{ active: choseKeyword.findIndex((keyword) => keyword.id === item.id) !== -1 }"
				>
					{{ item.categoryName }}
				</view>
			</scroll-view>
		</view>
		<view class="chose selected">
			<div class="tip">已选择关键词</div>
			<scroll-view lower-threshold="50" scroll-y="true" class="scroll-view" style="height: 300rpx">
				<view v-for="item in choseKeyword" class="item" :key="item.id" @click="chose(item)">
					{{ item.categoryName }}
				</view>
			</scroll-view>
		</view>
		<view class="button" @click="submit">提交推荐</view>
	</view>
</template>
<script>
import { getKeyWordList, getRecommendList ,setRecommendList} from '@/api/keyword/keyword.js';
export default {
	data() {
		return {
			triggered: false,
			timer: null,
			total: 0,
			keywordList: [],
			pageNum: 1,
			choseKeyword: []
		};
	},
	onLoad() {
		this.getKeywordList();
		this.choseKeywords();
	},
	methods: {
		getPage() {
			if (this.timer !== null || this.keywordList.length >= this.total) return;
			this.timer = setTimeout(() => {
				this.pageNum += 1;
				this.getKeywordList();
				clearTimeout(this.timer);
				this.timer = null;
			}, 500);
		},
		async getKeywordList() {
			const { total, rows } = await getKeyWordList({
				pageNum: this.pageNum,
				pageSize: 15
			});
			this.keywordList = this.keywordList.concat(rows);
			this.total = total;
		},
		chose(keyword) {
			const chosen = {
				categoryName: keyword.categoryName,
				id: keyword.id
			};

			// 使用 findIndex 方法来找到对象的位置，基于其 id 属性
			const index = this.choseKeyword.findIndex((item) => item.id === chosen.id);

			if (index === -1) {
				// 如果不存在于数组中，则添加
				this.choseKeyword.push(chosen);
			} else {
				// 如果已存在，则移除
				this.choseKeyword.splice(index, 1);
			}
		},
		async choseKeywords() {
			const { data } = await getRecommendList();
			this.choseKeyword = this.choseKeyword.concat(data);
		},
		async submit(){
			const idList= this.choseKeyword.map(item=>{
				return item.id
			})
			const res=await setRecommendList(idList)
		}
	}
};
</script>

<style lang="less" scoped>
.recommend {
	padding: 40rpx;
	.chose {
		.tip {
			color: #007bff;
			font-size: 40rpx;
		}
		.scroll-view {
			margin-top: 40rpx;
			width: 100%;
			height: 400rpx;
			background-color: #fff;
			padding: 20rpx;
			.item {
				border: 1rpx solid black;
				padding: 0 30rpx;
				margin: 0 10rpx 10rpx 0;
				display: inline-block;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 30rpx;
				border-radius: 30rpx;
			}
			.active {
				border-color: #5dade2;
			}
		}
	}
	.selected {
		margin-top: 40rpx;
	}
	.button{
		width: 300rpx;
		margin: 80rpx auto;
		text-align: center;
		font-size: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #115f92;
		color: #fff;
		border-radius: 20rpx;
		border: 1px solid black;
	}
	
}
</style>
